import React from 'react'
import { Form, Input, Button, Row, Col, Steps, message } from 'antd'
import { useState } from 'react';
import { validateTel, sendCodeFn, validateTelCode, registerFn } from './../../api/users'
const { Step } = Steps
const steps = [
  {
    title: '第一步',
    content: '输入手机号',
  },
  {
    title: '第二步',
    content: '输入验证码',
  },
  {
    title: '第三步',
    content: '输入密码',
  },
];
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 8 },
};

const telreg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/
function RegisterUser() {
  const [tel, setTel] = useState('')
  const [telcode, setTelcode] = useState('')
  const [ text, setText ] = useState('发送短信验证码')
  const [password, setPassword] = useState('')
  const [ flag, setFlag ] = useState(true)
  const [ telcodeflag, setTelCodeFlag ] = useState(false)

 
  const handlerTelChange = e => {
    setTel(e.target.value)
    // 正则验证手机号
    telreg.test(e.target.value) ? setFlag(false) : setFlag(true)
  }

  const handlerTelCodeChange = e => {
    setTelcode(e.target.value)
  }

  const handlerPasswordChange = e => {
    setPassword(e.target.value)
  }
  // 步骤条
  const [current, setCurrent] = React.useState(0);
  
  // 第一步点击下一步
  const handlerFirstClick = () => {
    validateTel({tel}).then(res => {
      if (res.data.code === '10001') {
        message.warning('该手机号已被注册');
      } else {
        localStorage.setItem('tel', tel)
        setCurrent(1)
      }
    })
    
  }

  const handlerSecondClick = () => {
    // 一定要校验验证码的正确性
    validateTelCode({
      tel,
      telcode
    }).then(res => {
      console.log(res)
      if (res.data.code === '10002') {
        message.warning('验证码验证失败')
      } else {
        setCurrent(2)
      }
    })
    
  }

  const sendCode = () => {
    console.log(123)
    let timer = null
    let time = 10
    sendCodeFn({tel}).then(() => {
      message.success('验证码已发送')
    })
    timer = setInterval(() => {
      
      time--
      setText(time + 's后重新发送')
      setTelCodeFlag(true)
      if(time <= 0) {
        clearInterval(timer)
        setText('发送短信验证码')
        setTelCodeFlag(false)
        time = 10
      }
    }, 1000)
  }
  return (
    <>
      <Steps current={current}>
        {steps.map(item => (
          <Step key={item.title} title={item.title} description={item.content}/>
        ))}
      </Steps>
      <Form
        {...layout} 

      >
        {
          current === 0 && <Form.Item
          label="手机号"

          rules={[{ required: true, message: '请输入您的手机号' }]}
        >
          <Col span={24}>
            <Input onChange = { handlerTelChange } maxLength={11}/>
          </Col>
          <Button type="primary" disabled = { flag } onClick = { handlerFirstClick }>下一步</Button>
        </Form.Item>
        }
        {
          current === 1 && <Form.Item
          label="手机验证码"

          rules={[{ required: true, message: '请输入手机验证码' }]}
        >
          <Row >
            <Col span={ 16 }>
              <Input onChange = { handlerTelCodeChange }/>
            </Col>
            <Col span={ 8 }>
              <Button type="dashed" onClick = { sendCode } disabled = { telcodeflag }>{ text }</Button>
            </Col>
            <Button type="primary" disabled = { telcode.length === 0 } onClick = {
              handlerSecondClick
            }>下一步</Button>
          </Row>
        </Form.Item>
        }
        {
          current === 2 && <>
            <Form.Item
          label="密码"

          rules={[{ required: true, message: '请输您的密码' }]}
        >
          <Col span={24}>
            <Input.Password onChange={ handlerPasswordChange }/>
          </Col>
          <Button type="primary" disabled={ password.length === 0 } onClick={() => {
            registerFn({
              tel,
              password
            }).then(() => {
              message.success('注册成功')
            })
          }}>
            注册
          </Button>
        </Form.Item>

          </>
        }
      </Form>
    </>
    );
}

export default RegisterUser
